<template>
    <div>
        reactive:姓名{{x.name}}，年龄{{x.age}}
        <hr>
        ref:基本数据类型 直接展示 ，{{x2}}
        <hr>

    </div>
</template>

<script setup>
    // ref,reactive 响应式数据处理
    import {ref,reactive} from 'vue'
    const x2 = ref(100)
    // console.log("x2",x2.value)
    // x2.value = 1000  修改时需要.value
    let job = ref({     // 引用对象类型: proxy 代理
        type:'前端工程师',
        salary:'30K'
    })
    console.log(job.value.type)  // 中间多了一层.value 为什么不需要再次.value 因为引用对象里面的属性不是用refImpl(ref引用对象)


    //reactive 针对对象,不能用于基本数据类型(一般也把基本数据类型 塞到对象里{}  以后就用reactive)  基于proxy 代理对象
    // 这种可以随便摆弄 都是响应式的
    const x = reactive({
        name:"wf",
        age:20
    })
    // console.log("x",x.age)
    let hobby =reactive( ["抽烟","喝酒","打牌"] ) // 这个能处理数组, 也能通过下标直接修改数据

</script>

<style scoped>

</style>